<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Image</title>
    <style>
        body {
            margin: 20px;
        }
        img {
            margin: 20px;
        }
    </style>
    <script>

        function showAnswer(eventObj) {
            var img = eventObj.target;
            var imageName = img.id + ".jpg";
            img.src = imageName;
            setTimeout(reblur, 2000, img);
        }
        function reblur(img) {
            var imgName = img.id + "blur.jpg";
            img.src = imgName;
        }
        function imgOnmouseOver(eventObj) {
            var img = eventObj.target;
            var imageName = img.id + ".jpg";
            img.src = imageName;
        } 
        function imgOnmouseOut(eventObj) {
            var img = eventObj.target;
            var imageName = img.id + "blur.jpg";
            img.src = imageName;
        }
        function init() {
            var images = document.getElementsByTagName("img");
            for (var i = 0; i < images.length; i++) {
                var img = images[i];
                // img.onclick = showAnswer;
                img.onmouseover = imgOnmouseOver;
                img.onmouseout = imgOnmouseOut;
            }
        }

        window.onload = init;
    </script>
</head>
<body>
    <img id="zero" src="zeroblur.jpg">
    <img id="one" src="oneblur.jpg">
    <img id="two" src="twoblur.jpg">
    <img id="three" src="threeblur.jpg">
    <img id="four" src="fourblur.jpg">
    <img id="five" src="fiveblur.jpg">
</body>
</html>